<template>
  <div class="content-container" style="position: relative;min-height: calc(100vh - 60px);"  >
    <div class="panel">
      <div class="content">
        <div class="condition">
          <el-input style="width:500px" placeholder="请输入岗位" v-model="queryParam.keyword" >
            <el-button slot="append" icon="el-icon-search" @click="searchPosition"></el-button>
          </el-input>
        </div>

        <div class="position-list">
          <div class="position-wrapper"  v-show="showList"  v-for="(item,index) in lgPositionData" :key="index" >
            <div class="r1">
              <div class="gwmc00">{{item.gwmc00}}</div>
              <div class="zgrs00">招{{item.zgrs00}}人</div>
              <div class="yhlx00">{{dict.yhlxOptions[item.yhlx00]}}</div>
              <div class="jgys00">{{item.jgys00}}{{dict.jgdwOptions[item.jgdw00] }}</div>
            </div>
            <div class="r2">
              <div class="gzqssj">
                <div class="date">{{item.gzqssj.substring(0,10)}}</div>
                <div class="time">{{item.gzqssj.substring(10)}}</div>
              </div>
              <div class="divider">
                <el-divider style="font-size: small" content-position="center">工作时间</el-divider>
              </div>
              <div class="gzjzsj">
                <div class="date">{{item.gzjzsj? item.gzjzsj.substring(0,10):'不限'}}</div>
                <div class="time">{{item.gzjzsj?item.gzjzsj.substring(10):""}}</div>
              </div>
            </div>
            <div class="r3">
              <div class="gzqy00">工作地区：{{item.gzqy00}}</div>
            </div>
            <div class="r4">
              <div class="cjsj00">发布时间：{{item.cjsj00}}</div>
            </div>
            <div class="r5">
              <el-button size="normal" type="danger"  @click.stop="toDetail(item)"> 详情 </el-button>
              <el-button size="normal" type="warning" style="margin-left: 40px" @click.stop="handleCollect(item)"> {{item.sfsc00=='1'?'取消收藏':'收藏'}} </el-button>
              <el-button size="normal" style="margin-left: 40px" type="primary" @click.stop="applyPosition(item)">接单</el-button>
            </div>
          </div>
        </div>
        <div class="position-page-bar" v-show="lgPositionData.length>0">
          <button class="btn" v-show="!(queryParam.page==1)" @click="pageQuery('last')">上一页</button>
          <button class="btn" v-show="!(queryParam.page==queryParam.pageTotal)" @click="pageQuery('next')" >下一页</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {positionApi} from "@/api";
import {Dialog} from "vant";

export default {
  name:"position-query-lg",
  components:{
    ReturnBtn
  },
  data(){
    return {
      showList:false,
      fullscreenLoading:false,
      dict:{
        yhlxOptions: {
          "1":"个人",
          "2":"企业"
        },
        jgdwOptions: {
          "1":"元/天",
          "2":"元/小时",
          "3":"元"
        }
      },

      queryParam:{
        keyword:"",
        page:1,
        limit:9,
        pageTotal:0
      },
      lgPositionData:[
      ],
      qzPositionData:[]
    }
  },
  created() {
    this.queryPositionList()
  },
  methods:{
    toDetail(item){
      this.$router.push({path:"/position-detail-lg",query:{gwxh00:item.gwxh00}})
    },
    handleCollect(item){
      positionApi.collectPosition({
        gwlx00: "1",
        gwxh00: item.gwxh00,
        type: 1-Number(item.sfsc00 || 0)
      }).then((res)=>{
        item.sfsc00 = 1 - Number(item.sfsc00 || 0)
      })
    },
    applyPosition(item){
      if(!this.$checkRealName(this.$router)){
        return
      }
      positionApi.applyPosition({

        gwxh00: item.gwxh00,

      }).then((res)=>{
        Dialog.alert({
          title: "温馨提示",
          message: "接单成功",
          theme: 'round-button'
        })
      })
    },
    searchPosition(){
      this.queryParam.page=1
      this.queryPositionList()
    },
    pageQuery(type){
      if(type=='next'){
        this.queryParam.page= this.queryParam.page+1
        this.queryPositionList()
      }else{
        if(this.queryParam.page!=1){
          this.queryParam.page= this.queryParam.page-1
          this.queryPositionList()

        }

      }
    },
    queryPositionList(){
      this.showList=false
      positionApi.queryPositionList({
      sfsy00:"1",
      keyword: this.queryParam.keyword,
      page: this.queryParam.page,
      limit: this.queryParam.limit
    }).then((res) => {
        this.showList=true
        this.lgPositionData=[]
        res.data.records.forEach((item,index)=>{
           setTimeout(()=>{
             this.lgPositionData.push(item)
           },100*index)
        })

        this.queryParam.pageTotal=res.data.pageTotal
    }).finally(()=>{
    })
  }
  }
}
</script>

<style lang="scss" scoped>
/* 定义过渡样式 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active for <=2.1.8 */ {
  opacity: 0;
}
.panel{
  overflow-y: hidden;
  display: flex;
  width: 90%;
  margin: 0px auto 10px auto;
  .nav{
    height: 100%;
    width: 60px;
    background-color: #e0b9a5;
  }
  .content{
    flex: 1;
    height: 100%;
    .condition{
      margin-top: 5px;
    }
    .position-list{
      margin-top: 30px;
      margin-left: 60px;
      flex-flow:row wrap;
      display: flex;
      .position-wrapper{
        width: 420px;
        height: 220px;
        background-color: #f2f2f2;
        box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.5);
        margin: 10px 10px 15px 100px;
        padding-bottom: 10px;
        border-radius: 10px;
        .r1{
          display: flex;
          .gwmc00{
            color: #000;
            padding: 10px;
            font-weight: bolder;
            font-size: 20px;
            width: 160px;
            white-space: nowrap; /* 确保文本在一行内显示 */
            overflow: hidden; /* 隐藏超出容器的内容 */
            text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
          }
          .zgrs00{
            color: #3191fe;
            font-size: 16px;
            margin-top: 15px;
            font-weight: bolder;
          }
          .yhlx00{
            background-color: #409eff;
            height:  20px;
            margin-top: 10px;
            line-height: 20px;
            padding: 4px;
            margin-left: 30px;
            border-radius: 12px;
            font-size: 14px;
            color: white;
          }
          .jgys00{
            color: #ff3434;
            margin-left: auto;
            margin-right: 10px;
            margin-top: 10px;
            font-size: 20px;
            font-weight: bold;
          }

        }
        .r2{
          display: flex;
          .gzqssj{
            margin-top: 5px;
            width: 120px;
            .date{
              font-size: 18px;
              //font-weight: bold;
            }
            .time{
              font-size: 15px;
              //font-weight: bold;
            }

          }
          .gzjzsj{
            margin-top: 5px;
            width: 120px;
            .date{
              font-size: 18px;
              //font-weight: bold;
            }
            .time{
              font-size: 15px;
              //font-weight: bold;
            }
          }
          .divider{
            flex: 1;
          }

        }
        .r3{
          .gzqy00{
             text-align: left;
             color: #648eda;
             padding: 10px 0px 10px 10px;
            font-size: 16px;
          }
        }
        .r4{
          .cjsj00{
            text-align: left;
            color: #9b9696;
            padding: 10px 0px 10px 10px;
            font-size: 14px;
          }
        }
        .r5{
            margin-top: 5px;
            text-align: center;
        }
      }
    }
    .position-page-bar{
       text-align: center;
       display: flex;
       margin-top: 10px;
       padding-bottom: 10px;
      .btn{
        margin: auto;
        width: 243px;
        height: 63px;
        line-height: 20px;
        border-radius: 16px;
        background-color: rgba(64,149,229,0.8);
        color: rgba(16,16,16,1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border: 1px solid white;
        font-size: 30px;
        color: white;
      }
    }

  }
}
.el-divider__text {
  //border-radius: 20px;
  position: absolute;
  background: none;
  //background-color: #3191fe;
  padding: 0 20px;
  //font-weight: 500;
  //color: #FFFFFF;
}

</style>
